<template>
    <el-table :data="ordersDetail" style="width: 90%; margin: 0 auto;">
        <template #empty>
            <el-col><el-text>没有订单记录哦~~~</el-text></el-col>
            <el-col><el-link href="/goods" type="primary">去选购蛋糕吧</el-link></el-col>
        </template>
        
        <!-- 订单展开行 -->
        <el-table-column label="订单详情" type="expand" width="150">
            <template #default="props">

                <!-- 订单详情表 -->
                <el-table :data="props.row.orderItemsDetails" style="width: 80%;margin: 0 auto;">
                    <el-table-column label="商品信息" fixed="left">
                        <template #default="scope">
                            <el-row>
                                <el-col :span="4">
                                    <el-image style="width: 100px; height: 100px;" :src="scope.row.goods.cover"
                                        fit="cover">
                                        <template #error>
                                            <div style="font-size: 30px;">
                                                <el-icon>
                                                    <Picture />
                                                </el-icon>
                                            </div>
                                        </template>
                                    </el-image>
                                </el-col>
                                <el-col :span="12" :offset="1">
                                    <el-row><el-text truncated>
                                            <el-tooltip class="box-item" :content="scope.row.goods.name"
                                                placement="top-start">
                                                {{ scope.row.goods.name }}
                                            </el-tooltip>
                                        </el-text></el-row>
                                    <el-row><el-text truncated>{{ scope.row.type.name }}</el-text></el-row>
                                    <el-row><el-text truncated>{{ scope.row.goods.name }}</el-text></el-row>
                                </el-col>
                            </el-row>
                        </template>
                    </el-table-column>
                    <el-table-column prop="orderItem.price" label="单价 (元)" width="150" />
                    <el-table-column prop="orderItem.num" label="数量" width="150" />
                    <el-table-column label="小计" width="150">
                        <template #default="scope">
                            ￥{{ (scope.row.orderItem.price * scope.row.orderItem.num).toFixed(1) }}
                        </template>
                    </el-table-column>
                </el-table>


            </template>
        </el-table-column>

        <!-- 订单总体信息 -->
        <el-table-column label="订单ID" prop="orders.oid" width="80" />
        <el-table-column label="订单生成时间" width="200">
            <template #default="scope">
                {{ new Date(scope.row.orders.createTime).toLocaleString() }}
            </template>
        </el-table-column>
        <el-table-column label="收货人姓名" prop="orders.name" width="100" />
        <el-table-column label="收货人电话" prop="orders.phone" width="120" />
        <el-table-column label="付款金额（元）" prop="orders.total" width="150" />
        <el-table-column label="完成情况" width="150">
            <template #default="scope">
                <el-tag v-if="scope.row.orders.completionStatus === 1" type="success">待送达</el-tag>
                <el-tag v-else-if="scope.row.orders.completionStatus === 2">已完成</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="订单备注" prop="orders.remark" />
        <!-- <el-table-column label="操作">
            <template #default="scope">
                <el-button link type="primary" size="large" v-if="scope.row.orders.completionStatus === 1" 
                    @click="fun1">催送达</el-button>
                <el-button link type="primary" size="large" v-else @click="deleteOne(scope.$index, scope.row)">删除订单记录</el-button>
                <el-button link type="primary" size="large" v-if="scope.row.orders.completionStatus === 1"  @click="deleteOne(scope.$index, scope.row)">取消订单</el-button>
            </template>
        </el-table-column> -->
    </el-table>

</template>

<script>
import { ElMessage } from 'element-plus';
import axios from 'axios';

export default {
    data() {
        return {
            ordersDetail: [
                {
                    "orders": {
                        "oid": 1,
                        "uid": 2,
                        "total": 159.8,
                        "remark": "巴拉巴拉巴拉巴拉",
                        "name": "张三",
                        "phone": "12344445555",
                        "address": "长沙望城湖南信息职院南院",
                        "completionStatus": 1,
                        "createTime": "2023-12-26T18:12:31",
                        "updateTime": "2024-01-01T22:44:36",
                        "status": 1
                    },
                    "orderItemsDetails": [
                        {
                            "orderItems": {
                                "oiid": 1,
                                "oid": 1,
                                "gid": 3,
                                "price": 79.9,
                                "num": 1,
                                "createTime": "2023-12-26T19:03:38",
                                "updateTime": "2023-12-26T19:03:38",
                                "status": 1
                            },
                            "goods": {
                                "gid": 3,
                                "tid": 4,
                                "name": "冰淇淋蛋糕",
                                "cover": "http://127.0.0.1:8080/image/img榴莲.jpg",
                                "price": 59.5,
                                "intro": "测试数据",
                                "stock": 70,
                                "createTime": "2023-12-15T15:28:32",
                                "updateTime": "2023-12-15T15:28:32",
                                "status": 1
                            },
                            "type": {
                                "tid": 4,
                                "name": "冰淇淋系列",
                                "createTime": "2023-12-26T15:04:49",
                                "updateTime": "2023-12-26T15:04:49",
                                "status": 1
                            }
                        },
                        {
                            "orderItems": {
                                "oiid": 1,
                                "oid": 1,
                                "gid": 3,
                                "price": 79.9,
                                "num": 1,
                                "createTime": "2023-12-26T19:03:38",
                                "updateTime": "2023-12-26T19:03:38",
                                "status": 1
                            },
                            "goods": {
                                "gid": 3,
                                "tid": 4,
                                "name": "冰淇淋蛋糕",
                                "cover": "http://127.0.0.1:8080/image/img榴莲.jpg",
                                "price": 59.5,
                                "intro": "测试数据",
                                "stock": 70,
                                "createTime": "2023-12-15T15:28:32",
                                "updateTime": "2023-12-15T15:28:32",
                                "status": 1
                            },
                            "type": {
                                "tid": 4,
                                "name": "冰淇淋系列",
                                "createTime": "2023-12-26T15:04:49",
                                "updateTime": "2023-12-26T15:04:49",
                                "status": 1
                            }
                        },
                    ],
                }
            ],
        }
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            axios.get('/order/' + this.$store.state.user.uid)
                .then(result => {
                    if (result.data.code === 1) {
                        this.ordersDetail = result.data.data;
                        console.log(result.data.data);
                    } else {
                        if (result.data.msg === 'Invalid_token') {
                            ElMessage.info("登录信息失效，请重新登录");
                            this.$store.state.isLogin = false;
                            this.$store.state.navActive = '/login';
                            this.$cookies.remove('token');
                        }
                        console.log(result);
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        },
        fun1() {
            ElMessage.info("这是老板的电话：'12344445555'\n\n (^_^)");
        }
    }
}
</script>